<template>
  <el-container ref="bigModel" class="main-model">
    <!-- 设备抗社会属性分析-大屏 -->
    <el-header>
      <Header :active-title="4" />
    </el-header>
    <el-main>
      <div>
        <div class="home-model">
          <el-row>
            <el-col :span="leftModelSpan" style="background-color: #113367">
              <div class="home-model-left">
                <!-- <Graph v-if="graphData" :lineDash="[0, 0]" :graphData="graphData" /> -->
                <Graph3
                  :style="{ height: rightModelShow ? '50vh' : '100vh' }"
                  v-if="graphData1"
                  :graphData="graphData1"
                  :showBootm="showBootmFlg"
                  @showData = 'showDataFn'
                />
                <Graph3
                  v-if="rightModelShow && currentNode.type == '数据混淆'"
                  :style="{ height: rightModelShow ? '50vh' : '100vh' }"
                  :graphData="duikangjieguo.after ? duikangjieguo.after : []"
                  :showBootm="showBootmFlg"
                />

                <div style="color: #fff" v-if="rightModelShow">
                  <div
                    style="margin-left: 30px"
                    v-if="currentNode.type == '单节点'"
                  >
                    <h2>单节点对抗结果展示</h2>
                    <h3>跳转新页面之后通过右键点击查看页面的源代码</h3>
                    <button
                      @click="showRightModel"
                      style="
                        background-color: #113367;
                        border: 1px solid #fff;
                        color: #fff;
                        padding: 10px 20px;
                        border-radius: 5px;
                        z-index: 10000;
                      "
                    >
                      点击查看对比效果
                    </button>
                    <h4>对抗前：{{ duikangjieguo.after.old_name }}</h4>
                    <h4>对抗后：{{ duikangjieguo.after.new_name }}</h4>
                    <h4>方法：{{ duikangjieguo.after.method }}</h4>
                  </div>
                  <!-- <div v-if="currentNode.type == '数据混淆'">
                    <h4>数据混淆对抗结果展示</h4>
                    {{ duikangjieguo.content.strategy?duikangjieguo.content.strategy.description:'' }}
                  </div> -->
                </div>
              </div>
            </el-col>
            <el-col :span="rightModelSpan">
              <div class="home-model-right">
                <!-- <div class="infoModel"> -->
                <!-- <div class="infoTitle flex-container">
                    归属组织泄露风险统计
                    <el-button
                      type="text"
                      @click="todataStatistics"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div> -->
                <!-- <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  > -->
                <!-- <div ref="mychart" class="echart" style="width: 100%; height: 100%" /> -->
                <!-- <piechart /> -->
                <!-- </div> -->
                <!-- </div> -->
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织泄露风险告警
                    <!-- 跳转终端页面 -->
                    <el-button
                      type="text"
                      @click="todataStatistics"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div>
                  <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  >
                    <list-scroll class="box" :speed="0.5">
                      <div class="list">
                        <div
                          class="infoItem1"
                          v-for="(item, index) in ipList"
                          :key="index"
                          @click="clickinfoList1(item, false)"
                        >
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.address }} 归属于 -- {{ item.org }} ({{
                              item.type
                            }})
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                  <div style="position: absolute; top: 60px; left: -50px">
                    <div class="tc">
                      <div class="bg">
                        <div class="title">IP与组织关系</div>
                        <div class="body">
                          <div class="unit-info">
                            <span>ID</span>
                            {{ showData.id }}
                          </div>
                          <div class="unit-info">
                            <span>名称</span>
                            {{ showData.name }}
                          </div>
                          <div style="padding: 10px">
                            <el-button
                              class="bt1"
                              @click="dialogFormVisible = true"
                            >
                              设备抗归属分析
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织保护任务列表
                    <!-- 跳转终端页面 -->
                    <el-button
                      type="text"
                      @click="toTaskManagement"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div>
                  <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  >
                    <list-scroll class="box" :speed="0">
                      <div class="list">
                        <div
                          class="infoItem2"
                          v-for="(item, index) in infoList2"
                          :key="index"
                          @click="clickinfoList2(item)"
                        >
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.ip }}--{{
                              item.type == "1" ? "单节点" : "数据混淆"
                            }}--抗归属任务{{
                              item.status == "2" ? "已完成" : "进行中"
                            }}
                            <!-- <span v-for="dict in dict.type.atlas_task_status">
                              <span v-if="item.taskStatus == dict.value">
                                {{ dict.label }}
                              </span>
                            </span> -->
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                  <div
                    v-if="rightModelShow && currentNode.type == '数据混淆'"
                    style="
                      position: absolute;
                      top: 30px;
                      left: -600px;
                      color: #fff;
                    "
                  >
                    <h4>数据混淆对抗结果展示</h4>
                    {{
                      duikangjieguo.content
                        ? duikangjieguo.content.strategy
                          ? duikangjieguo.content.strategy.description
                          : ""
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </el-col>

            <el-dialog
              title="选择新组织"
              style="margin-top: 100px"
              :visible.sync="dialogFormVisible"
            >
              <el-form
                label-width="120px"
                :model="form"
                :rules="rules"
                ref="form"
              >
                <el-form-item
                  label="新组织"
                  :label-width="'120px'"
                  prop="newOrg"
                >
                  <el-select
                    style="width: 300px"
                    v-model="form.newOrg"
                    filterable
                    placeholder="请选择新组织"
                  >
                    <el-option
                      v-for="dict in allOrg"
                      :key="dict.name"
                      :label="dict.name"
                      :value="dict.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="抗归属方法"
                  :label-width="'120px'"
                  prop="fantype"
                >
                  <el-select
                    style="width: 300px"
                    v-model="form.fantype"
                    filterable
                    placeholder="请选择抗归属方法"
                  >
                    <el-option
                      label="基于动态渲染的单节点抗IP归属识别"
                      value="dynamic_rendering"
                    ></el-option>
                    <!-- <el-option
                      label="基于字体替换的单节点抗IP归属方法"
                      value="font_replacement"
                    ></el-option> -->
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure('form')"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/views/largeScreen/components/header/index.vue";
import ListScroll from "@/components/DtSrcollCopy2";

import indexTree from "./components/equipmentRelationship.vue";
import piechart from "./components/huanxing2.vue";
import {
  selectCombatAtlasTaskListNew,
  riskPageQuery,
  predictRelationship,
  getInfoByIp,
  initDatasi,
} from "@/api/IPOwnershipProtection/dataStatistics.js";
import Graph3 from "./graph3.vue";

import {
  antiHomingInfo,
  predictAntiHomingInfo,
  getAllOrg,
  antiHomingInfoNew,
  getCombatAtlasTaskByIdNew,
} from "@/api/IPOwnershipProtection/dataStatistics.js";
import Graph1 from "./graph1.vue";
import dialog2 from "./components/dialog2.vue";
export default {
  components: {
    Header,
    indexTree,
    ListScroll,
    Graph1,
    piechart,
    Graph3,
    dialog2,
  },
  dicts: ["atlas_task_status"],
  data() {
    return {
      showData:{},
      showBootmFlg: true,
      rightModelShow: false,
      duikangjieguo: {},
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [],
      infoList2: [],

      infoHeight: 500,
      // 饼形
      scrollTop: 0,
      graphData: {
        nodes: [],
        edges: [],
      },
      graphData1: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      ipList: [],
      dialogFormVisible: false,
      form: {
        newOrg: "",
        fantype: "",
      },
      rules: {
        newOrg: [
          { required: true, message: "请选择新组织", trigger: "change" },
        ],
        fantype: [
          { required: true, message: "请选择抗归属方法", trigger: "change" },
        ],
      },
      allOrg: [],
      currentNode: null,
    };
  },
  mounted() {
    // this.oldFn()
    selectCombatAtlasTaskListNew(this.queryParams).then((res) => {
      if (res.code == 200) {
        this.infoList2 = res.rows;
      }
    });
    this.initDatasiFn();
    this.newFn();
    this.getAllOrg();

    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 2;
    let that = this;
  },
  methods: {
    showDataFn(data){
      console.log('22222222222222222222',data)
      this.showData = data
    },

    initDatasiFn() {
      initDatasi().then((res) => {
        if (res.code == 200) {
          this.graphData1 = res.data;
        } else {
          this.$message.error("查询失败，请联系管理员");
        }
      });
    },
    getAllOrg() {
      getAllOrg().then((res) => {
        this.allOrg = res.data;
      });
    },
    newFn() {
      let ipList = [
        // {
        //   address: "210.45.16.8",
        //   org: "安徽中医药大学",
        //   city: "合肥市",
        //   domain: "http://xuebao.ahtcm.edu.cn/",
        //   ipc: "192.168.1.0/24",
        //   type: "单节点",
        // },
      ];
      riskPageQuery(this.queryParams).then((res) => {
        res.data.map((ele) => {
          let obj = {
            address: ele.ip.address,
            org: ele.ip.address,
            city: ele.o.name,
            domain: ele.ip.domain,
            ipc: ele.ip.ipc,
            type: "单节点",
          };
          ipList.push(obj);
        });
      });
      predictRelationship(this.queryParams).then((res) => {
        res.data.map((ele) => {
          let obj = {
            address: ele.ip.address,
            org: ele.org?.name,
            city: ele.o.name,
            domain: ele.ip.domain,
            ipc: ele.ip.ipc,
            type: "数据混淆",
          };

          ipList.push(obj);
        });
        // let obj22 = {
        //   address: "210.45.96.212",
        //   type: "单节点",
        // };
        // this.clickinfoList1(obj22);
      });
      console.log("ipListipListipListipListipList", ipList);
      this.ipList = ipList;
    },
    oldFn() {
      riskPageQuery(this.queryParams).then((res) => {
        this.infoList = res.data.content;
        let nodes = [];
        let edges = [];
        this.total = res.data.totalElements;
        res.data.content.map((ele) => {
          nodes.push({
            id: String(ele.address),
            label: ele.address,
            params: {
              ip: ele.address,
              type: "",
              flag: true,
              city: ele.city,
              domain: ele.domain,
              org: ele.org,
              ipc: ele.ipc,
            },
          });
          if (ele?.city?.name) {
            nodes.push({
              id: String(ele?.city?.name),
              label: ele?.city?.name,
              params: { ip: ele.address, type: "city" },
            });
          }
          if (ele?.domain?.name) {
            nodes.push({
              id: String(ele?.domain?.name),
              label: ele?.domain?.name,
              params: { ip: ele.address, type: "domain" },
            });
          }
          if (ele?.org?.name) {
            nodes.push({
              id: String(ele?.org?.name),
              label: ele?.org?.name,
              params: { ip: ele.address, type: "org" },
            });
          }
          if (ele.ipc) {
            ele.ipc.map((aa) => {
              if (aa?.name) {
                nodes.push({
                  id: String(aa.name),
                  label: aa.name,
                  params: { ip: ele.address, type: "ipc" },
                });
              }
            });
          }
          if (ele.city?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.city?.name),
              label: "城市",
            });
          }
          if (ele.domain?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.domain?.name),
              label: "域名",
            });
          }
          if (ele.org?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.org?.name),
              label: "组织",
            });
          }
          if (ele.ipc) {
            ele.ipc.map((ee) => {
              if (ee?.name) {
                edges.push({
                  source: String(ele.address),
                  target: String(ee.name),
                  label: "网段",
                });
              }
            });
          }
        });
        const nodesIds = new Set();
        this.graphData.nodes = nodes.filter((item) => {
          if (nodesIds.has(item.id)) {
            return false;
          }
          nodesIds.add(item.id);
          return true;
        });
        this.graphData.edges = edges;
      });
    },
    clickinfoList1(item, type) {
      this.showData={}
      if (type == false) {
        this.showBootmFlg = true;
        this.rightModelShow = false;
      }
      this.currentNode = item;
      console.log("this.currentNodethis.currentNode", this.currentNode);
      if (item.type == "单节点") {
        let obj = {
          ip: item.address,
          type: "attackability",
        };
        getInfoByIp(obj).then((res) => {
          console.log(res);
          console.log(res.data);
          this.graphData1 = res.data;
          //遍历res.data 的all_nodes_in_path 的 labels为‘FHost’的节点  res.data是数组
          res.data.forEach((item) => {
            item.all_nodes_in_path.forEach((item2) => {
              if (item2.labels[0] == "FHost") {
                this.currentNode.domain = item2.value.FHost;
                console.log("成功获取域名");
              }
            });
          });
        });
      } else {
        let obj = {
          ip: item.address,
          type: "predictable",
        };
        getInfoByIp(obj).then((res) => {
          console.log(res);
          console.log(res.data);
          this.graphData1 = res.data;
          res.data.forEach((item) => {
            item.all_nodes_in_path.forEach((item2) => {
              if (item2.labels[0] == "FHost") {
                this.currentNode.domain = item2.value.FHost;
                console.log("成功获取域名");
              }
            });
          });
        });
      }
    },
    sure(form) {
      let that = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.newOrg == this.currentNode.org) {
            this.$message.error("新组织不能和原组织一样,请重新选择!");
          } else {
            if (this.currentNode.type == "单节点") {
              let newNamet = that.form.newOrg;
              //let newNamet = "中国科学技术大学";
              let oldNamet = that.currentNode.city ? that.currentNode.city : "";
              //let oldNamet = "安徽中医药大学";
              let domain = that.currentNode.domain
                ? that.currentNode.domain
                : "";
              //let domain = "http://xuebao.ahtcm.edu.cn/";
              let methodTttt = that.form.fantype;
              console.log(domain, oldNamet, newNamet, methodTttt);
              antiHomingInfoNew({
                original_domain: domain,
                old_name: oldNamet,
                new_name: newNamet,
                method: methodTttt,
                ip: this.currentNode.address,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "抗归属正在进行!",
                  });
                  this.dialogFormVisible = false;
                  //刷新列表
                  selectCombatAtlasTaskListNew(this.queryParams).then((res) => {
                    if (res.code == 200) {
                      this.infoList2 = res.rows;
                    }
                  });
                  // this.$router.push('/IPOwnershipProtection/dataStatistics')
                }
              });
            } else {
              predictAntiHomingInfo({
                ip: this.currentNode.address,
                old_name: this.currentNode.city,
                new_name: this.form.newOrg,
                fantype: this.form.fantype,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "抗归属正在进行!",
                  });
                  this.dialogFormVisible = false;
                  //刷新列表
                  selectCombatAtlasTaskListNew(this.queryParams).then((res) => {
                    if (res.code == 200) {
                      this.infoList2 = res.rows;
                    }
                  });

                  // this.$router.push('/IPOwnershipProtection/dataStatistics')
                }
              });
            }
          }
        } else {
          return false;
        }
      });
    },
    clickinfoList2(item) {
      this.showData ={}
      //item.type == 2 多节点 item.type ==1 单节点
      this.rightModelShow = true;
      this.showBootmFlg = false;
      console.log("item.typeitem.typeitem.typeitem.typeitem.type", item);
      //抗之后aga的数据库
      if (typeof item.after == "string") {
        item.after = item.after ? JSON.parse(item.after) : {};
      }
      //
      if (typeof item.before == "string") {
        item.before = item.before ? JSON.parse(item.before) : {};
      } //content
      //调用抗的接口的返回
      if (typeof item.content == "string") {
        item.content = item.content ? JSON.parse(item.content) : {};
      }
      this.duikangjieguo = item;
      let data = {};
      if (item.type == 2) {
        data = { type: "数据混淆", address: item.ip };
      } else {
        data = { type: "单节点", address: item.ip };
      }

      this.clickinfoList1(data);
      //下面展示对比分析的结果
    },
    todataStatistics() {
      this.$router.push("/IPOwnershipProtection/EManagement");
    },
    toTaskManagement() {
      this.$router.push("/IPOwnershipProtection/dataStatistics");
    },
    // hideRightModel() {
    //   this.rightModelShow = false;
    //   this.rightModelSpan = 0;
    //   this.leftModelSpan = 24;
    // },
    showRightModel() {
      // ifrem打开新窗口
      window.open("http://43.129.43.61:80", "_blank");
    },

    onSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.home-model-left {
  height: calc(100vh - 70px);
}

.home-model-right {
  height: 100vh;
  border-radius: 5px;
  padding: 5px;
  padding-top: 15px;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .infoModel {
    height: 45vh;
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 40px;
      box-sizing: border-box;
    }
  }
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 21px;
}

.rightJ {
  z-index: 1000;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.bt1 {
  font-size: 14px;
  width: 120px;
  background: linear-gradient(270deg, #2db2fd 0%, #0e5fff 100%);
  border-radius: 4px;
  border: none;
  color: #fff;
  text-align: center;
  position: relative;
  top: 15px;
  left: 15px;
  padding: 8px 15px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.bt1:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tc {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 300px;
  height: 200px;
  z-index: 10000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.bg {
  padding: 15px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
  border-radius: 8px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.unit-info {
  display: flex;
  position: relative;
  top: 15px;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  color: #90cee9;
  font-size: 14px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.unit-info:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.right-align {
  margin-left: auto;
  color: #fff;
  font-weight: 500;
}

.redtext {
  color: #ff4d4f;
  font-weight: 600;
}

.el-descriptions-item {
  font-size: 16px;
}

.dialogDetailstext {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
}
// .home-model-search{
//   z-index: 5;
// }
</style>
